// # TextView

// #author 李文奇

// 文本显示标签

// className: TextView

// ## 配置

// 变量 | 类型 | required | 描述
// ----|------|----------|-----
// collapse | bool | false | 是否折叠
// text | string | false | 显示内容

// 例子：

// ```js
// {
//   type: 'SearchView',
//   options: {
//     collapse:false,
//     text:"text"
//   }
// }
// ```

// ## 样式
define([
  'underscore',
  './BaseView'
], function(_, BaseView) {

  /*
   * collapse: 是否折叠
   */
   return BaseView.extend({
       // 对应到css
       type: 'TextView',
       events:{
           "click .txt-switch-area":"switchAreaClick",
           "click .text": "onClick",
       },

       _getStyleFromOptions:function(options,innerSpan){
           var styleArr={};
           if (this.options.marginTop||this.options.marginRight||this.options.marginLeft||this.options.marginBottom) {
               styleArr["marginTop"] = this.options.marginTop+"px";
               styleArr["marginRight"] = this.options.marginRight+"px";
               styleArr["marginLeft"] = this.options.marginLeft+"px";
                styleArr["marginBottom"] = this.options.marginBottom+"px";
            }

            if (this.options.color) {
                styleArr["color"] = this.options.color;
            }

            if (this.options.size) {
                styleArr["fontSize"] = this.options.size;
            }

            if(this.options.padding){
                styleArr["padding"] = this.options.padding;
            }

            if (this.options.lineHeight) {
                styleArr["line-height"] = this.options.lineHeight + "em";
            }

            if (this.options.bold) {
                styleArr["font-weight"] = "bold";
            }

            if (this.options.italic) {
                styleArr["font-style"] = "italic";
            }

            if (this.options.underline) {
                styleArr["text-decoration"] = "underline";
            }

            if (this.options.align) {
                styleArr["text-align"] = this.options.align + "";
            }
            return styleArr;
        },

        switchAreaClick:function(){
            if(this.flag){
                this.switchArea.removeClass("txt-switch-up");
                this.text_el.addClass("txt-hide");
            }else{
                this.switchArea.addClass("txt-switch-up");
                this.text_el.removeClass("txt-hide");
            }
            this.flag= !this.flag;
        },

        render: function() {
            this.$el.empty();
            // 文本容器
            this.text_el = $("<div class ='text'></div>");
            this.$el.append(this.text_el);
            this.text_el.css(this._getStyleFromOptions(this.options,this.text_el));
            var text = this.options.text;
            var curModel = this.getModel();

            if(curModel && this.options.key){
                text = curModel.get(this.options.key);
            }

            if (text){
                //加上toString解决数字调用split报错问题
                var value = text.toString()
                .split('\n')
                .map(function(each) {
                    //只能给span加background属性
                    if(this.options.bgcolor){
                        return"<span style='background:"+this.options.bgcolor+"'>" + each + "</span>";
                    }
                    return "<span>" + each + "</span>";
                }.bind(this))
                .join('');

                this.$('.text').append(value);

            }

            if (text && text != "") {
                this.$el.removeClass('empty');
            } else {
                this.$el.addClass('empty');
            }

            if (this.options.dataType == "dynamic"){
                this.$el.removeClass('empty');
            }

            if (this.options.collapse) {
                this.text_el.addClass("txt-hide");
            } else {
                this.text_el.removeClass("txt-hide");
            }
            this._delayShowValue();
            return this;
        },
        _delayShowValue: function() {
            var _this = this;
            window.setTimeout(function() {
                var maxheight = $(_this.el).height();
                if (_this.options.collapse ) {
                    // 展开按钮
                    var collapse_el = $("<div class ='txt-icon'></div>");
                    _this.switchArea = $("<div class='txt-switch-area'><span class='icon icon-down-nav' style='font-size:18px;color:#999'></span></div>");
                    if($(_this.el).find('.txt-icon').length==0){
                        collapse_el.append(_this.switchArea);
                        _this.$el.append(collapse_el);
                    }
                }
            }, 50);
        },
        onClick:function(e){
            this.triggerEvent('click');
            if ($(".txt-hide").length>0) {
                this.text_el.removeClass("txt-hide");
                this.switchArea.addClass("txt-switch-up");

            } else {
                this.text_el.addClass("txt-hide");
                this.switchArea.removeClass("txt-switch-up");
            }
        },
        onDataBind: function(model){
            this.render();
        },
    });
});
